<template>
  <div>
    <van-popup v-model="isShow" round>
      <div class="loginSign">
        <div class="signImg py-32" :class="siginInfo.sign_in_continue_num <=0 ? 'list-gray' :''" >
              <img src="./img/qd-ico.png" alt="SignIn">
          </div>
          <div v-if="siginInfo.sign_in_continue_num >0">
            <div class="textColor font-700 font-45 text-center">{{$t('签到成功')}}</div>
            <!--        已签到多少日-->
            <div class="text-center my-30">
              <span class="textColor1">{{$t('您已签到')}}</span>
              <span class="textColor font-34 font-700 px-12">{{siginInfo.sign_in_continue_num}}</span>
              <span class="textColor1">{{$t('天')}}</span>
            <p class="mt-30">
              <span class="textColor1">{{$t('恭喜您获得')}}</span>
              <span class="textColor font-34 font-700 px-12">{{siginInfo.day_profit}}</span>
              <span class="textColor1">{{siginInfo.symbol}}</span>
            </p>
          </div>
        </div>
        <div class="text-center" v-else>
          <p class="textColor font-700 font-45">{{$t('签到失败')}}</p>
          <p class="textColor1 my-30">{{$t(`${signFallMsg}`)}}</p>
        </div>
<!--        签到按钮-->
        <div>
          <div class="signBtn btnMain" @click="changeIsShow">{{ $t('确定') }}</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json 文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》 ';

import {Popup} from "vant";
import {_signInApply} from "@/API/user.api";

export default {
  // import 引入的组件需要注入到对象中才能使用
  components: {
    [Popup.name]:Popup
  },
  props: ["isSigninShow"],
  data() {
    // 这里存放数据
    return {
      siginInfo:{
        sign_in_continue_num: 0,
        day_profit: 0,
        symbol: 'USDT',
      },
      signFallMsg:'',
    }
  },
  // 计算属性 类似于 data 概念
  computed: {
    isShow: {
      get() {
        return this.isSigninShow;
      },
      set(value) {
        this.$emit("changeIsShow", value);
      }
    }
  },
  // 监控 data 中的数据变化
  watch: {},
  // 方法集合
  methods: {
    signinApply(){
      _signInApply().then(res=>{
          this.siginInfo = res
      }).catch(error=>{
          this.siginInfo.sign_in_continue_num = 0
          this.siginInfo.day_profit = 0
          this.siginInfo.symbol = 'USDT'
          this.signFallMsg = error.msg
      })
    },
    changeIsShow(){
      this.isShow = false
    },
  },
  // 生命周期 - 创建完成（可以访问当前this 实例）
  created() {
  },
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {
  },
  beforeCreate() {
  },
  beforeMount() {
  }, // 生命周期 - 挂载之前
  beforeUpdate() {
  }, // 生命周期 - 更新之前
  updated() {
  }, // 生命周期 - 更新之后
  beforeDestroy() {
  }, // 生命周期 - 销毁之前
  destroyed() {
  }, // 生命周期 - 销毁完成
  activated() {
  } // 如果页面有 keep-alive 缓存功能,这个函数会触发
}
</script>

<style lang="scss" scoped>
.loginSign{
  width: 640px;
  padding: 40px 0;
  .signImg{
    width: 300px;
    height: 164px;
    margin: 0 auto;
    img{
      width: 100%;
      height: 100%;
    }
  }

  .signBtn{
    margin: 0 64px;
    text-align: center;
    height: 78px;
    line-height: 78px;
    border-radius: 12px;
    color: #fff;
  }

  .list-gray{
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
 }
}
</style>